<template>
  <div
    ref="targetEl"
    class="flex items-center pl-4 pr-[26px] py-3 rounded-xl cursor-pointer"
    :class="[{ 'bg-c-white': !isHovered }, { 'bg-c-grey-xs': isHovered }]"
    @click="clickCardHandler"
  >
    <!-- photo + fi + city -->
    <div class="flex w-[370px] gap-5">
      <div class="h-[52px] w-[52px]">
        <img
          v-if="userPhoto && !isPending"
          class="rounded-full"
          :src="userPhoto"
        />
        <Skeletor v-else-if="isPending" circle size="52" />
        <SvgoErrAva v-else filled :font-controlled="false" />
      </div>
      <div class="flex flex-col">
        <p class="heading-l-medium text-c-grey-3xl">{{ fi }}</p>
        <p class="heading-s-medium text-c-grey-2xl">
          {{ city }}
        </p>
      </div>
    </div>
    <div class="flex items-center">
      <!-- divider -->
      <div
        class="w-0.5 h-[56px] mr-8"
        :class="[
          { 'bg-c-grey-xs': !isHovered },
          { 'bg-c-grey-small': isHovered }
        ]"
      >
        &nbsp;
      </div>
      <!-- org -->
      <div class="flex w-[320px] items-center mr-[60px] gap-2.5">
        <p class="heading-s-medium text-c-grey-large">Организация:</p>
        <p class="heading-m-semi text-c-grey-2xl">{{ org }}</p>
      </div>
      <!-- prof -->
      <div class="flex w-[450px] items-center gap-2.5">
        <p class="heading-s-medium text-c-grey-large">Должность:</p>
        <p class="heading-m-semi text-c-grey-2xl">{{ position }}</p>
      </div>
    </div>
    <div class="grow"></div>
    <!-- fav icon -->
    <SvgoStarDisabled
      v-if="isHovered && !userStore.getIsFavorite(props.id)"
      class="text-c-grey-medium hover:text-c-grey-large z-0 scale-125"
      filled
      @click.stop="toFavorites"
    />
    <SvgoStarEnabled
      v-else-if="userStore.getIsFavorite(props.id)"
      class="z-0 scale-125"
      filled
      @click.stop="toFavorites"
    />
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '~/stores/userStore'
import { ApiEndpoints } from '~/types/ApiEndpoints'
interface Props {
  id: string
  cityEn: string | null
  cityRu: string | null
  firstNameEn: string | null
  firstNameRu: string | null
  lastNameRu: string | null
  lastNameEn: string | null
  orgNameRu: string | null
  orgNameEn: string | null
  positionNameEn: string | null
  positionNameRu: string | null
}
const props = withDefaults(defineProps<Props>(), {
  id: '',
  cityEn: null,
  cityRu: null,
  firstNameEn: null,
  firstNameRu: null,
  lastNameEn: null,
  lastNameRu: null,
  orgNameEn: null,
  orgNameRu: null,
  positionNameEn: null,
  positionNameRu: null
})
const router = useRouter()
const targetEl = ref()
const isHovered = useElementHover(targetEl)
const userPhoto: Ref<null | string> = ref(null)
const isPending: Ref<boolean> = ref(true)
const userStore = useUserStore()

const clickCardHandler = () => {
  router.push({
    query: { contactId: props.id }
  })
}

const fi = computed(() => {
  if (props.firstNameRu && props.lastNameRu) {
    return props.lastNameRu + ' ' + props.firstNameRu
  } else return 'Нет данных'
})

const city = computed(() => {
  if (props.cityRu && props.cityRu.length > 0) {
    return props.cityRu
  } else return 'Нет данных'
})

const org = computed(() => {
  if (props.orgNameRu && props.orgNameRu) {
    return props.orgNameRu
  } else return 'Нет данных'
})

const position = computed(() => {
  if (props.positionNameRu && props.positionNameRu.length > 0) {
    return props.positionNameRu
  } else return 'Нет данных'
})

const { data: userPhotoBuffer, pending: photoPending } = await useAPILazyFetch(
  ApiEndpoints.GET_USER_PHOTO,
  { query: { contactId: props.id } }
)

watch(
  userPhotoBuffer,
  () => {
    if (!userPhoto.value && userPhotoBuffer.value) {
      isPending.value = false
      userPhoto.value = useBufferToImgSrc(useUnProxy(userPhotoBuffer)?.data)
    } else if (
      !userPhoto.value &&
      !userPhotoBuffer.value &&
      photoPending.value
    ) {
      isPending.value = true
    } else {
      isPending.value = false
    }
  },
  {
    immediate: true
  }
)

const toFavorites = async () => {
  userStore.changeFavorites(props.id)
  const { error } = await useAPIFetch(ApiEndpoints.SET_FAVORITE, {
    method: 'PUT',
    body: {
      userId: userStore.user.id,
      favoriteId: props.id
    }
  })
  if (error.value) {
    console.error(error.value.message)
  }
}
</script>

<style scoped></style>
